/// 在 Android 中，你可以使用 Canvas 和 Drawable 将图片和形状绘制到屏幕上。Flutter

/// 也有一个类似于 Canvas 的 API，因为它基于相同的底层渲染引擎 Skia。因此，在 Flutter 中

/// 用画布 (canvas) 进行绘制对于 Android 开发者来说是一件非常熟悉的工作。

/// Flutter 有两个帮助你用画布 (canvas) 进行绘制的类：CustomPaint 和 CustomPainter，后者可以实现自定义的绘制算法。

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(home: new DemoApp()));

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(body: new Signature());
}

class Signature extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new SignatureState();
}

class SignatureState extends State<Signature> {
  var _points = <Offset>[];

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        print("触摸开始:$details");
        setState(() {
          RenderBox referenceBox = context.findRenderObject();
          Offset localPosition =
              referenceBox.globalToLocal(details.globalPosition);
          _points = List.of(_points)..add(localPosition);
        });
      },
      onPanEnd: (DragEndDetails details) {
        print("点击结束$details");
        _points.add(null);
      },
      child: CustomPaint(
        painter: SignaturePainter(_points),
        size: Size.infinite,
      ),
    );
  }
}

class SignaturePainter extends CustomPainter {
  SignaturePainter(this.points);

  final List<Offset> points;

  @override
  void paint(Canvas canvas, Size size) {
    print("画布:$canvas,绘制:$size");
    var paint = new Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5.0;
    for (int i = 0; i < points.length - 1; ++i) {
      if (points[i] != null && points[i + 1] != null)
        canvas.drawLine(points[i], points[i + 1], paint);
    }
  }

  @override
  bool shouldRepaint(SignaturePainter other) => other.points != points;
}
